<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>报表页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <div class="char_box">
		<div id="container" style="background-color:#FFF; min-width: 400px; height: 400px; margin: 0 auto">
		
		</div>
	</div>
	
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/highcharts.js"></script>
<script type="text/javascript">

var chart;//chart obj


//渲染hightChat的主函数；
function RenderChart(){
//这里需要定义一个全局变量，一供在ajax回调中将数据设置到该对象中。
chart = new Highcharts.Chart({
       
            chart: {
                renderTo: 'container',//图表容器，一个简单的div
                zoomType: 'xy',//这里的数据缩放机制还没搞清楚，到底是图像的放大，但是一定不会是数据的复查和chart的重渲，应该是一个鸡肋，在关键应用中，如果理解不深还是不要开启。如果有朋友知道相应的触发事件或者其他，望相告一下。
                //Event listeners for the chart.
                events: {  
                //当前demo没有用到chart事件，将会在实时监控应用中使用，load事件。
            } 
            },credits: { 
enabled: false   //右下角不显示LOGO，这里我还想请教一下如果不给钱会怎样？
},
            title: {
                text: '仓库站点探测图',
                align: 'center',
                margin: 30,//类比html的margin，相对于中间的图形区域
 style: {
color: '#2d2d2d',
fontWeight: 'bold',
fontSize: '18px',
fontFamily: '微软雅黑, 黑体',
}
            },
            subtitle: {
                text: '温湿度探测',
y:40,//类比于margin
style: {
color: '#89A500',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
}
            },
//X:带替换,在server端返回小时间段进行替换，这里是在之前做前台测试的时候写的注解，这也是项目开发的一个经验吧，先用死的数据将项目构造出来，之后在进行动态交互。所以这里有很多注解我都没删了。
            xAxis: [{
                 categories: []//当前X轴的数据，默认也就是空的数组。这里就是如果你将type值使用默认，那么当前数组类型就可以任意指定了。我将会将上面返回的"timeCon":["10:45","10:52","10:55","11:02","11:05","11:12","11:15","11:22","11:24","11:32","11:34"]这组值给设定进去，作为两条参数的一个标识单位，以时/分划分，但是感觉不是很好应该加上时期。
            }],
//需要注意的是这里的yAxis具有两个数据标尺。通过两个对象字面量指定。
            yAxis: [{//一个数组设置chart yAxis的左右labels style
           
                labels: {//设置温度样式，this就应该表示当前这个Axis对象/数据集对象
                    formatter: function() {//格式化程序
                        return this.value+'°C';//在图像被渲染的时候就会被触发,this.value?应该是根据添加的数据对象的温度来进行设置的；
                    },
                    style: {
                        color: '#89A500',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
                    }
                },
                title: {
                    text: '温 度',
                    style: {
                        color: '#89A500',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
                    }
                },plotLines: [{
               color: '#00FF00',
               width: 2,
               value: 0.5,//需要注意这里的设置需要和对应的数据类型相匹配
               dashStyle:'ShortDash',//定制警戒线样式,有虚线/实线...
               zIndex: 10,//类比html中的z-index
               label: {  
                         text: '超出温度临界值',
                         style: {
color: '#00FF00',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
}
                }
            }],
                
            }, {
                labels: {
                    formatter: function() {
                        return this.value +' %';
                    },
                    style: {
                        color: '#4572A7',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
                    }
                }, 
                title: {// 设置湿度样式
                    text: '湿 度',
                    style: {
                        color: '#4572A7',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: '微软雅黑, 黑体',
                    }
                },
                 plotLines: [{
	               color: '#FF0000',
	               width: 2,
	               value: 0.5,//需要注意这里的设置需要和对应的数据类型相匹配
	               dashStyle:'ShortDash',//定制警戒线样式,有虚线/实线...
	               zIndex: 10,//类比html中的z-index
	               label: {  
	                         text: '超出湿度临界值',
	                         style: {
									color: '#FF0000',
									fontWeight: 'bold',
									fontSize: '14px',
									fontFamily: '微软雅黑, 黑体',
									}
                			}
            }],
                opposite: true//将两个标尺分别设置在chart的左右两边
            }],//yAxis option end
            tooltip: {//tooltip触发,类比于html中的title
                formatter: function() {
                    return '探测数据 '+
                        this.x +': '+ this.y +
                        (this.series.name == '湿 度' ? ' mm' : '°C');//series就代表了探测数据对象
                }
            },
            legend: {
                layout: 'vertical',//定义图例的排列方式
                align: 'left',
verticalAlign: 'top',
                x: 120,
                y: 100,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{//当前数据和上面的yAxis属性对应的数组相匹配
                name: '湿度',//定义图例的/数据节点/series的名字
                color: '#4572A7',//控制series的颜色
                type: 'column',//指定序列的显示类型/样式
                yAxis: 1,//从这里划分两个series组
                // 此处存放数据值 用,分开例如：1.8,8.9,null,9.2,   如果在某一点数据为空可以用null 来表示
                //如果是想动态赋值这个位置 应该为空 即：data: []，之后在load even被回调之后在将数据赋值进来
                data: []
    
            }, {
				yAxis: 0,
                name: '温 度',
                color: '#89A54E',
                type: 'spline',
                data: []
            }]
        });//chart end
        
}

function getData(){
//首先获取站点名和查询时间间隔，默认以当前系统时间为参照系。
var station_id = $("#station option:selected").attr("value");
var hour = $("#hour option:selected").attr("value");
//所有print 为打印测试，这里我就不删了，才学编程没什么经验，代码很乱，望指正。
print(station_id,"station2");
print(hour,"hour2");
//一点简单的校验，由于是在把项目基本功能跑通之后才回头做的检验，比较简陋。
if("选择站点查询" == $("#station option:selected").val()){
alert("请先选择一个待查询的站点。");
return;
}
if("按时查询" == $("#hour option:selected").val()){
hour = window.prompt("请选择查询时间，以小时为单位","请直接输入1/3/6/12/24几个数值。")
  if(null==hour||!(hour==1)||!(hour==3)||!(hour==6)||!(hour==12)||!(hour==24)){
  print(hour,"键入时间");
return;
  }
}
//进入桥接。
$.ajax({
async : true,
type: "POST",
url: "chartDetector.action",//后端入口
data: {station: station_id,hour: hour},//需要两个参数作为查询依据。
success: function(returnedDate, status)
{
            //为图表设置值:series[0]表示温度；反之亦然；
            if(!returnedDate.tempCon){
           
            print("no data!");
            alert("当前查询无数据内容，请更换站点，或者时间，重新查询。");
            window.location.href = "<%=request.getContextPath()%>/Detector/chartDetector.jsp";
            return;
            }
            print(returnedDate.tempCon,"tempCon"); 
print(returnedDate.humiCon,"humiCon");
print(returnedDate.timeCon,"timeCon");
//渲染chart————》可以进入该函数先。
RenderChart();
//但基础的视图渲染完毕之后就可以将后台获取得到的3组数据分别通过chart全局对象，设置到对于的数据存储区域中完成数据的填充了。在下篇中将提供后台代码。
            chart.series[0].setData(returnedDate.tempCon);
chart.series[1].setData(returnedDate.humiCon);
chart.xAxis[0].setCategories(returnedDate.timeCon);
            print("success","return"); 
           
},
error: function(xhr, status, errorThrown)
{
//window.location.href = "listDetectorRtime.action?start=0&range=10";
print(errorThrown,"error return");
}
});//ajax end
    }
</script>
  </body>
</html>
